---
  import siteData from "../data/site.json";

  export type PageSEO = {
    title?: string;
    description?: string;
    url?: string;
    image?: {
      src: string;
      alt: string;
    },
    frontmatter?: Object;
  }

  const {
    title = siteData.title,
    description = siteData.description,
    url = Astro.url,
    image = siteData.image,
    frontmatter,
  } = Astro.props;

  function jsonLDGenerator({ type, post, url }: any) {
    if (type === "post") {
      return `<script type="application/ld+json">
        {
          "@context": "https://schema.org",
            "@type": "BlogPosting",
              "mainEntityOfPage": {
            "@type": "WebPage",
              "@id": "${url}"
          },
          "headline": "${post.title}",
            "description": "${post.description}",
              "image": "${post.image?.src}",
                "author": {
            "@type": "Person",
              "name": "${post.author}",
                "url": "${post.authorUrl}"
          },
          "datePublished": "${post.published}"
        }
      </script>`;
    }
    return `<script type="application/ld+json">
      {
        "@context": "https://schema.org/",
          "@type": "WebSite",
            "name": "${siteData.title}",
              "url": "${import.meta.env.SITE}"
      }
    </script>`;
  }

  const jsonLD = jsonLDGenerator({
    type: frontmatter ? "post" : "website",
    post: frontmatter,
    url,
  });
---

<!-- SEO -->
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={url} />

<!-- Open Graph -->
<meta property="og:title" content={title} />
<meta property="og:site_name" content={siteData.title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image?.src} />
<meta property="og:image:url" content={image?.src} />
<meta property="og:image:secure_url" content={image?.src} />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
<meta property="og:image:alt" content={image?.alt} />

<!-- Twitter -->
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={image?.src} />
<meta name="twitter:image:alt" content={title} />
<meta name="twitter:domain" content={import.meta.env.SITE} />

<!-- JSON LD -->
<Fragment set:html={jsonLD} />